<template>
  <div class="swiper-container nav">
      <swiper :options="navOption" >
        <swiper-slide >
          <ul>
            <li v-for="item in navP1" :key="item.name">
              <img :src="item.images" alt="">
              <p>{{item.name}}</p>
            </li>
         </ul>
        </swiper-slide>
         <swiper-slide class="swiper-slide" >
            <ul>
              <li v-for="item in navP2" :key="item.name">
                <img :src="item.images" alt="">
                <p>{{item.name}}</p>
              </li>
            </ul>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
</template>

<script>
export default {
  props:["navP1","navP2"],
  data(){
    return{
      //导航相关配置
     navOption:{
        pagination:{
          el:'.swiper-pagination',
          clickable:true,
        }
      }
    }
  }
}
</script>

 <style lang="less" scoped>
  .nav{
    padding-top:10/16rem;
    font-size: 14/16rem;
    height: 176/16rem;
    .swiper-container{
      height: 100%;
    }
    li{
      width: 25%;
      float: left;
      text-align: center;
      margin-bottom:8/16rem;
      img{
        width: 55/16rem;
        display: block;
        margin:0 auto;
      }
      p{
        padding-top:3/16rem
      }
    }
    .swiper-pagination{
      bottom: 0
    }
  }
</style>